{extend name="main"}
{block name="style"}
<style type="text/css">
	#container{line-height: 1;width: 800px;}
	.cid-title{font-size: .8rem;font-weight: bold;}
	.bg-F8F8F8{background-color: #F8F8F8;}
	.bg-DDDDDD,.bg-hover:hover{background-color: #DDDDDD;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">

	<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">
	{empty name=":request()->get('cid')"}
	  <el-form-item label="发布到" prop="pid">
	    <el-cascader 
	    	v-model="pid"
	    	placeholder="试试搜索：单页"
	    	filterable
	    	class="col-12 col-sm-4 pl-0 pr-0"
			:props="defaultProps"
	    	:options="cate"
	     	:show-all-levels="false">
	    </el-cascader>
	  </el-form-item>
	{/empty}

	  <el-form-item label="标题" prop="title">
	    <el-input v-model="form.title" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Name"></el-input>
	    <el-popover
		  placement="right"
		  width="600"
		  trigger="click">
		  	<div class="px-2 pb-2" :class="form.cla">{{form.title}}</div>
		  	<div class="flex">
		  		<div class="flex-1 px-2">
				  	<div class="small mb-2 text-muted">标题颜色</div>
				  	<div v-for="v in titleColor" class="bg-F8F8F8 mb-2 rounded pointer bg-hover"
				  	:class="{'bg-DDDDDD':titleCla.indexOf(v)!==-1}"
				  	@click="toggleCla(v)">
				  		<div :class="v" 
				  		class="text-truncate p-2">{{v.replace('article-title-','').toUpperCase()}}</div>
				  	</div>
		  		</div>
		  		<div class="flex-1 px-2">
				  	<div class="small mb-2 text-muted">标题字号</div>
				  	<div v-for="v in titleFontSize" class="bg-F8F8F8 mb-2 rounded pointer bg-hover"
				  	:class="{'bg-DDDDDD':titleCla.indexOf(v)!==-1}"
				  	@click="toggleCla(v)">
				  		<div :class="v" 
				  		class="text-truncate p-2">{{v.replace('article-title-','').toUpperCase()}}</div>
				  	</div>
		  		</div>
		  		<div class="flex-1 px-2">
				  	<div class="small mb-2 text-muted">标题粗细</div>
				  	<div v-for="v in titleFontWeight" class="bg-F8F8F8 mb-2 rounded pointer bg-hover"
				  	:class="{'bg-DDDDDD':titleCla.indexOf(v)!==-1}"
				  	@click="toggleCla(v)">
				  		<div :class="v" 
				  		class="text-truncate p-2">{{v.replace('article-title-','').toUpperCase()}}</div>
				  	</div>
		  		</div>
		  	</div>
		  	<div>
		  		<el-link type="primary" :underline="false" @click="form.cla='';titleCla=[];">清除格式</el-link>
		  	</div>
	    	<i slot="reference" class="el-icon-brush text-theme-icon pointer ml-2"></i>
		</el-popover>
	  </el-form-item>

	  <el-form-item label="别名" prop="alias">
	    <el-input v-model="form.alias" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Alias"></el-input>
	  </el-form-item>

	  <el-form-item label="文章来源" prop="source">
	    <el-input v-model="form.source" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Source"></el-input>
	  </el-form-item>

	  <el-form-item label="描述" prop="desc">
	    <el-input type="textarea" v-model="form.desc" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Desc" :autosize="{ minRows: 6, maxRows: 20}" maxlength="200"></el-input>
	  </el-form-item>

	  <el-form-item label="封面" prop="thumb">
		  <el-image
		  	v-if="imgUrl" 
		  	class="w-100 h-100 mw-200px mh-200px"
		    :src="imgUrl" 
		    :preview-src-list="[imgUrl]">
		  </el-image>
	  	  <el-upload
			  class="avatar-uploader"
			  action="/uploadFiles"
			  name="file"
			  accept="image/*"
			  :data="{path:'article/thumb'}"
			  :show-file-list="false"
			  :on-success="handleAvatarSuccess"
			  :on-error="handleAvatarError">
	  			<el-button size="small" type="primary">选择文件</el-button>
		  </el-upload>
	  </el-form-item>

	  <el-form-item label="排序" prop="sort">
	    <el-input v-model="form.sort" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Sort"></el-input>
	  </el-form-item>

	  <el-form-item label="阅读量" prop="view">
	    <el-input v-model="form.view" class="col-12 col-sm-4 pl-0 pr-0" placeholder="View"></el-input>
	  </el-form-item>

	  <el-form-item label="发布时间" prop="start_time">
	    <el-date-picker
	      v-model="form.start_time"
	      align="right"
	      type="date"
	      format="yyyy-M-d"
	      value-format="yyyy-M-d"
	      placeholder="选择日期"
	      @change="selectedStartTime">
	    </el-date-picker>
	  </el-form-item>

	  <el-form-item label="结束时间" prop="end_time">
	    <el-date-picker
	      v-model="form.end_time"
	      align="right"
	      type="date"
	      placeholder="选择日期"
	      format="yyyy-M-d"
	      value-format="yyyy-M-d"
	      @change="selectedEndTime">
	    </el-date-picker>
	  </el-form-item>

	  <el-form-item label="关联地区" prop="area">
	    <el-cascader 
	    	class="col-12 col-sm-4 pl-0 pr-0"
	    	v-model="form.area"
	    	placeholder="试试搜索：北京"
	    	filterable
			:props="defaultProps"
	    	:options="area">
	    </el-cascader>
	  	<small class="text-muted mt-2 d-block">
	  		<p class="mb-0">设置关联地区之后分站可通过关联地区，城市自动获取相应的数据</p>
	  	</small>
	  </el-form-item>

	  <el-form-item label="关联行业" prop="industry">
		  <el-select v-model="form.industry" filterable clearable default-first-option placeholder="试试搜索：互联网" class="col-12 col-sm-2 pl-0 pr-0">
		    <el-option
		      v-for="item in industry"
		      :key="item.id"
		      :label="item.title"
		      :value="item.id">
		    </el-option>
			</el-select>
	  	<small class="text-muted mt-2 d-block">
	  		<p class="mb-0">设置关联行业之后分站可通过关联行业自动获取相应的数据</p>
	  	</small>
	  </el-form-item>

	  <el-form-item label="状态" prop="status">
	    <el-radio-group v-model="form.status">
	      <el-radio :label="1">显示[默认]</el-radio>
	      <el-radio :label="0">隐藏</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="移动端弹窗" prop="force_alert">
	    <el-radio-group v-model="form.force_alert">
	      <el-radio :label="0">无[默认]</el-radio>
	      <el-radio :label="1">弹窗</el-radio>
	    </el-radio-group>
	  	<small class="text-muted mt-2 d-block">
	  		<p class="mb-0">该功能仅限“公告”分类有效</p>
	  	</small>
	  </el-form-item>

	  <el-form-item label="特殊状态" prop="status_alias">
	    <el-radio-group v-model="form.status_alias">
	      <el-radio :label="0">无[默认]</el-radio>
	      <el-radio :label="v.value" v-for="(v,index) in status_alias">{{v.title}}</el-radio>
	    </el-radio-group>
	  </el-form-item>

	  <el-form-item label="文章详情" class="line-height-inherit" prop="content">
		<script id="container" type="text/plain">{notempty name="Find"}{$Find.content|raw}{/notempty}</script>
	  </el-form-item>

	  <el-form-item>
	    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
	    <el-button @click="resetForm('form')">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
{/block}
{block name="script"}
{js href="/static/plugin/Ueditor/ueditor.config.js" /}
{js href="/static/plugin/Ueditor/ueditor.all.min.js" /}
{js href="/static/plugin/Ueditor/lang/zh-cn/zh-cn.js" /}
<script type="text/javascript">
	{empty name="industry"}
	var industry=[];
	{else/}
	var industry={:json_encode($industry,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="area"}
	var area=[];
	{else/}
	var area={:json_encode($area,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="cate"}
	var cate=[];
	{else/}
	var cate={:json_encode($cate,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="status_alias"}
	var status_alias=[];
	{else/}
	var status_alias={:json_encode($status_alias,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var url='/addArticle';
	var is_edit=false;
	var imgUrl='';
	var pid=[];
	var titleCla=[];
	var formData={
			cid:{notempty name=":request()->get('cid')"}{:request()->get('cid')}{else/}''{/notempty},
			title:'',
			cla:'',
			desc:'',
			alias:'',
			source:'',
			thumb:'',
			content:'',
			area:[],
			view:0,
			start_time:'',
			end_time:'',
			industry:'',
			status:1,
			force_alert:0,
			status_alias:0,
			sort:99,
		};
	{else/}
	var url='/editArticle/{$Find.id}';
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	var imgUrl=formData.thumb?'{:config('web.imgurl')}'+formData.thumb:'';
	var pid=[];
	for (var i = 0; i < cate.length; i++) {
		if(cate[i].id==formData.cid){
			pid.push(cate[i].id);
			break;
		}else if(cate[i].data){
			for (var j = 0; j < cate[i].data.length; j++) {
				if(cate[i].data[j].id==formData.cid){
					pid.push(cate[i].id);
					pid.push(cate[i].data[j].id);
					break;
				}else if(cate[i].data[j].data){
					for (var n = 0; n < cate[i].data[j].data.length; n++) {
						if(cate[i].data[j].data[n].id==formData.cid){
							pid.push(cate[i].id);
							pid.push(cate[i].data[j].id);
							pid.push(cate[i].data[j].data[n].id);
							break;
						}
					}
				}
			}
		}
	}
	if (formData.province&&formData.city&&formData.area) {
		formData.area=[formData.province,formData.city,formData.area];
	}else{
		formData.area=[];
	}
	var titleCla=[];
	if (formData.cla)
		titleCla=formData.cla.split(' ');
	{/empty}
</script>
<script type="text/javascript">
	var ue = UE.getEditor('container');
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			cate: cate,
			area: area,
			industry: industry,
			status_alias: status_alias,
			labelPosition:'right',
			pid:pid,
			titleCla:titleCla,
			titleColor:['article-title-c00000','article-title-ff0000','article-title-ffc000','article-title-ffff00','article-title-92d050','article-title-00b050','article-title-00b0f0','article-title-0070c0','article-title-002060','article-title-7030a0','article-title-glittering'],
			titleFontSize:['article-title-h6','article-title-h5','article-title-h4','article-title-h3','article-title-h2','article-title-h1'],
			titleFontWeight:['article-title-weight-normal','article-title-weight-100','article-title-weight-200','article-title-weight-300','article-title-weight-400','article-title-weight-500','article-title-weight-600','article-title-weight-700','article-title-weight-800','article-title-weight-900','article-title-weight-bold','article-title-weight-lighter'],
			form:formData,
			is_edit:is_edit,
	        imgUrl:imgUrl,
	        defaultProps: {
	          	value: 'id',
	          	label: 'title',
	          	children: 'data'
	        },
		    rules: {
		      title: [
		        { required: true, message: '请输入标题', trigger: 'blur' },
		        { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
		      ],
		      content: [
		        { required: true, message: '请输入内容', trigger: 'blur' },
		      ],
	          status: [
	            { required: true, message: '请选择状态', trigger: 'change' }
	          ],
		    }
		},
		watch:{
		    view:XYBase.viewWatch,
		    pid(val,oldVal){
				if (val.length>0) {
				this.form.cid=val[val.length-1];
				}
		    },
		},
		created(){
			XYBase.created(this);
		},
		methods:{
			toggleCla(val){
				var index=this.titleCla.indexOf(val);
				if (index===-1) {
					this.titleCla.push(val);
				}else{
					this.titleCla.splice(index,1);
				}
				this.form.cla=this.titleCla.join(' ');
			},
			selectedStartTime(val){
				if (this.form.end_time) {
					if (this.form.end_time<=val) {
						XYBase.msg('开始时间不能大于结束时间');
						this.form.start_time='';
					}
				}
			},
			selectedEndTime(val){
				if (this.form.start_time) {
					if (this.form.start_time>=val) {
						XYBase.msg('结束时间不能小于开始时间');
						this.form.end_time='';
					}
				}
			},
			handleAvatarSuccess:function(res, file) {
				if(res){
					if(res.code === 0){
						if(res.data.type == 'article/thumb'){
							this.form.thumb=res.data.path;
							this.imgUrl=res.data.url;
						}
						XYBase.success(res.msg);
					}else{XYBase.error(res.msg);}
				}else{XYBase.error(XYBase.config.system_network_error)}
			},
			handleAvatarError:function(res, file) {
	          	XYBase.error(XYBase.config.system_network_error)
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				    D.content=ue.getContent();
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:url,
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit)
										window.location.href='/article';
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.pid=pid;
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}